Skip to content

Add TypeAhead Component#17

Merged
bsbeeks merged 2 commits intomasterfrom
type_ahead
Oct 1, 2015
Merged

Add TypeAhead Component#17
bsbeeks merged 2 commits intomasterfrom
type_ahead

Conversation

@bsbeeks
Copy link
Contributor

@bsbeeks bsbeeks commented Oct 1, 2015

This add a new TypeAhead component to be used to select multiple items from a list.

Example

<TypeAhead
  items={[
    'JPMorgan Chase',
    'Bank of America',
    'Citigroup',
    'Wells Fargo',
    'The Bank of New York Mellon',
    'U.S. Bancorp',
    'HSBC Bank USA',
    'Capital One',
    'PNC Financial Services',
    'State Street Corporation'
  ]}
  placeholderText='Select a Bank'
  preSelectedItems={[
    'Bank of America',
    'Wells Fargo'
  ]}
/>

Props

items Array required
An array of Strings used for the options list. Example:

[  
  'JPMorgan Chase',
  'Bank of America',
  'Citigroup',
   'Wells Fargo',
  'The Bank of New York Mellon'
  'U.S. Bancorp',
  'HSBC Bank USA',
  'Capital One',
  'PNC Financial Services',
  'State Street Corporation'
]

`onItemRemove` _Function_ **optional** A method to be called whenever an item is removed by the user. It will be passed 2 parameters: the item removed, an updated array of selected items. Example:
_handleItemRemoved (item, selectedItems) {
  console.log(item + ' was removed from the list');
}

<TypeAhead
  // ..other props
  onItemRemove={_handleItemRemoved)
/>

`onItemSelect` _Function_ **optional** A method to be called whenever an item is selected by the user. It will be passed 2 parameters: the item selected, an updated array of selected items. Example:
_handleItemSelected (item, selectedItems) {
  console.log(item + ' was selected from the list');
}

<TypeAhead
  // ..other props
  onItemSelect={_handleItemSelected)
/>

`placeholderText` _String_ **optional** Default: 'Select Filters' The text to display by default when no items have been selected.
`preSelectedItems` _Array_ **optional** An array of Strings to be displayed as selected options by default. These values should be contained in the `items` Array. These values will be the starting point of the TypeAhead's selected values state. Once the user begins interacting with the TypeAhead, they will be ignored.

@jmophoto
Copy link
Contributor

jmophoto commented Oct 1, 2015

Looks good to me. :shipit:

@bsbeeks bsbeeks closed this Oct 1, 2015
@bsbeeks bsbeeks reopened this Oct 1, 2015
bsbeeks added a commit that referenced this pull request Oct 1, 2015
@bsbeeks bsbeeks merged commit d60daf4 into master Oct 1, 2015
@bsbeeks bsbeeks deleted the type_ahead branch October 1, 2015 20:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants